<template>
  <div>
    <div class="header flex justify-between items-center">
      <div class="flex items-center justify-between">
        <el-input :model-value="input" placeholder="根据名称查询" />
        <el-input :model-value="input" placeholder="根据入库人查询" />
        <el-input :model-value="input" placeholder="Please input" />
        <el-button type="primary" :icon="Search" class="btn-green"
          >查询</el-button
        >
      </div>
    </div>
    <el-table :data="tableData" stripe style="min-height: 40rem">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="price" label="单价(元)" sortable />
      <el-table-column prop="buyDate" label="购买日期" sortable />
      <el-table-column prop="registerDate" label="入库时间" />
      <el-table-column prop="stockNumber" label="当前库存">
        <template #default="scope" sortable>
          <div>{{ scope.row.stockNumber }}{{ scope.row.unit }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="registerPerson" label="入库人" />
      <el-table-column prop="themeName" label="状态">
        <template #default="scope">
          <div :class="scope.row.themeName">
            {{ scope.row.status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" link>查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination></Pagination>
  </div>
</template>

<script setup lang="ts">
import Pagination from "@/components/pagination/index.vue";
import { Plus, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const input = ref("");

const tableData = [
  {
    name: "商品A", //  物资名称
    price: 80, // 单价
    buyDate: "2022年-8月-13日", //  购买日期
    totalRegister: 96, //  累计入库数量
    unit: "件", //  单位
    registerDate: "2022-8月-13日", //  入库时间
    registerPerson: "团组织-李一鳞", //  入库人
    stockNumber: 56, //  库存数量
    themeName: "theme-success", //  物资状态-主题颜色
    status: "可借用", //   物资状态
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "支",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-warn",
    status: "待归还",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-7月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-blue",
    status: "流程中",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2012年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-error",
    status: "无法归还",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-success",
    status: "可借用",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-warn",
    status: "待归还",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "盒",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-success",
    status: "可借用",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-success",
    status: "可借用",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-error",
    status: "无法归还",
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    unit: "箱",
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    themeName: "theme-success",
    status: "可借用",
  },
];
</script>

<style scoped lang="scss">
.header {
  height: 70px;

  .el-input {
    margin-right: 20px;
  }
}
</style>
